<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"  %>
<script type="text/javascript">
$.unblockUI();
$(function() {
	$('#projectName').autocomplete({
		source: "./datosjson/searchProjects",
		minLength: 1,
		select: function( event, ui ) {
			$('#idProject').val(ui.item.id);
			$('#projectName').css('background-color', '#787878');
			$('#projectName').attr('readonly', 'true');
		}
	});
});

$("#projectChooseForm").validate({
	
	submitHandler: function(form) {

			$.post('./search/listTasks', $('#projectChooseForm').serialize(), function(resultadoHTML) {
				$('#searchResult').html(resultadoHTML);			
				});
    		}
});


function limpiarBusqueda()
{
	$('#idProject').val('');
	$('#projectName').val('');
	$('#projectName').removeAttr("readonly");
	$('#projectName').css('background-color', 'white');
}

$('#startDate').datepicker();
$('#finishDate').datepicker();
</script>
<h4>
	Search Task:
</h4>
<br>
<s:form id="projectChooseForm" action="listTasks" >
	<s:hidden name="idProject" id="idProject"/>
	<s:textfield cssClass="required" name="projectName" label="Project" id="projectName"/>	
	<tr><td><s:a cssClass="btn btn-mini" href="#" onclick="limpiarBusqueda()">Change Project</s:a></td><td></td></tr>
	<s:select name="userPerson.id" list="userPersons" listValue="name" listKey="id" label="User" headerKey="-1" headerValue="-ALL-"></s:select>
	<s:select name="taskStatus.id" list="taskStatus2" listValue="name" listKey="id" label="Task Status" headerKey="-1" headerValue="-ALL-"></s:select>
	<s:textfield name="period.startDate" label="Start Date" id="startDate"/>
	<s:textfield name="period.endDate" label="Finish Date" id="finishDate"/>
	<s:submit cssClass="btn btn-success" id="botSearch" align="left" value="Choose"/>
</s:form>

<div id="searchResult">

</div>

